<template>
  <!-- 头部开始 -->
  <div class="register-page">
    <form class="register">
      <div class="register-wrap">
        <router-link to="/">
          <img class="register-header" src="./images/login.jpg" alt="" />
        </router-link>
        <span class="register-account">小米账号</span>
      </div>
      <div class="register-nav">
        <a href=""><span class="register-agreement">用户协议</span></a>
        <a><span class="register-privacy">隐私政策</span></a>
        <a><span class="register-help">帮助中心</span></a>
        <span class="register-help">|</span>
        <select name="‎中文(简体)‎ " id="" class="register-language">
          <option value="">‎中文(简体)‎</option>
          <option value="">‎‎中文(繁體)‎</option>
          <option value="">‎English</option>
        </select>
      </div>
    </form>
    <!-- 头部结束 -->

    <!-- 中间开始 -->
    <ValidationObserver v-slot="{ handleSubmit }">
      <form action="" @submit.prevent="handleSubmit(submit)">
        <div class="middle">
          <div class="register-middle">
            <div class="register-user">
              <div class="register-userHeader">
                <div class="register-userLanding">
                  <router-link to="login"> 登录 </router-link>
                  <span class="register-line"></span>
                  <router-link to="register">注册</router-link>
                </div>
              </div>
              <ValidationProvider
                class="register-content"
                rules="phone|phoneRequired"
                v-slot="{ errors }"
                tag="div"
                mode="lazy"
              >
                <input
                  class="register-input"
                  type="text"
                  placeholder="请输入你的手机号"
                  v-model="user.phone"
                />
                <span class="error-msg">{{ errors[0] }}</span>
              </ValidationProvider>
              <ValidationProvider
                class="register-content"
                rules="code|codeRequired"
                v-slot="{ errors }"
                tag="div"
                mode="lazy"
              >
                <input
                  class="register-validation"
                  type="text"
                  placeholder="请输入验证码"
                  v-model="user.code"
                />
                <span class="disabled" v-if="isSendCode">还剩{{ time }}s</span>
                <span :class="{ disabled }" @click="sendCode" v-else
                  >发送验证码</span
                >
                <span class="error-msg">{{ errors[0] }}</span>
              </ValidationProvider>

              <ValidationProvider
                class="content"
                rules="password|passwordRequired"
                v-slot="{ errors }"
                tag="div"
                mode="lazy"
              >
                <input
                  class="register-password"
                  type="password"
                  placeholder="请输入你的登录密码"
                  v-model="user.password"
                />
                <span class="error-msg">{{ errors[0] }}</span>
              </ValidationProvider>
              <ValidationProvider
                class="content"
                :rules="`repassword:${user.password}|repasswordRequired`"
                v-slot="{ errors }"
                tag="div"
                mode="lazy"
              >
                <input
                  class="register-password"
                  type="password"
                  placeholder="请输入确认密码"
                  v-model="user.rePAssword"
                />
                <span class="error-msg">
                  {{ errors[0] }}
                </span>
              </ValidationProvider>
              <ValidationProvider
                class="controls"
                rules="verify"
                v-slot="{ errors }"
                tag="div"
                mode="lazy"
              >
                <input
                  class="checkbox"
                  name="m1"
                  type="checkbox"
                  v-model="user.isVerify"
                />
                已阅读并同意小米帐号
                <a
                  href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
                >
                  用户协议
                </a>
                和<a href="https://privacy.mi.com/miaccount/zh_CN/">
                  隐私政策</a
                >
                <span class="error-msg">{{ errors[0] }}</span>
                <div>
                  <button class="register-button">注册</button>
                </div>
              </ValidationProvider>

              <div class="register-helps">
                <div class="a-help"><a href="">收不到验证码?</a></div>
              </div>
              <div class="register-other">
                <div class="register-prompt">
                  <span>其他方式登录</span>
                </div>
                <div class="register-Imgs">
                  <img
                    class="register-logo"
                    src="./images/zhifubao.jpg"
                    alt=""
                  />
                  <img class="register-logo" src="./images/weixin.jpg" alt="" />
                  <img class="register-logo" src="./images/qq.jpg" alt="" />
                  <img class="register-logo" src="./images/weibo.jpg" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from "vee-validate"
import { required } from "vee-validate/dist/rules"
import { reqRegister, reqSendCode } from "@/api/user"
import { phoneReg } from "@/utils/rules"

// 定义表单校验的规则
// 检验是否同意协议
extend("verify", {
  validate(val) {
    return val
  },
  message: "请同意用户协议",
})

// 验证码
extend("codeRequired", {
  ...required,
  message: "请输入验证码",
})

const codeReg = /^[0-9]{6}$/

extend("code", {
  // val 就是表单项的值
  validate(val) {
    return codeReg.test(val)
  },
  message: "验证码不合法",
})

// 确认密码的验证 会有点不一样的地方 就是要传入参数 就去验证 是不是一样的就行
extend("repasswordRequired", {
  ...required,
  message: "请输入确认密码",
})

extend("repassword", {
  // val 就是表单项的值
  validate(val, { password }) {
    return val === password
  },
  message: "两次密码不正确",
  params: ["password"],
})

export default {
  name: "Register",
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      user: {
        // 默认值

        // 手机号码
        phone: "",
        // 验证码
        code: "",
        // 密码
        password: "",
        // 确认密码
        rePassword: "",
        // 用户协议
        isVerify: false,
      },
      time: 3,
      isSendCode: false,
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    async submit() {
      const { phone, code, password } = this.user
      await reqRegister({ phone, code, password })
      this.$router.push("/login")
    },
    async sendCode() {
      if (this.disabled) return
      this.isSendCode = true
      const timer = setInterval(() => {
        if (this.time <= 1) {
          clearInterval(timer)
          this.time = 60
          this.isSendCode = false
          return
        }
        this.time--
      }, 1000)
      this.timer = timer
      // 发送验证码
      const code = await reqSendCode(this.user.phone)
      console.log(code)
    },
  },
  computed: {
    disabled() {
      return !phoneReg.test(this.user.phone)
    },
  },
}
</script>

<style lang="less" scoped>
* {
  // min-width:1200px;
  margin: 0;
  padding: 0;
}

/* 头部开始 */
.register-page {
  width: 100%;
  min-width: 1200px;
  height: 100%;
}
.register {
  /* box-sizing: border-box; */
  width: 100%;
  height: 40px;
  padding: 20px 0;
  /* margin-top: 20px; */
  display: flex;
  justify-content: space-between;
}
.register-wrap {
  box-sizing: border-box;
  height: 40px;
  width: 160px;
}
.register-account {
  font-size: 24px;
  font-weight: 550;
  padding: 10px;
  line-height: 40px;
  align-content: center;
  justify-content: space-between;
  vertical-align: middle;
}
.register-nav {
  float: right;
}
.register-agreement,
.register-privacy,
.register-help {
  font-size: 14px;
  padding: 10px;
  display: inline-block;
  height: 40 px;
  font-weight: 400;
  color: #838383;
  line-height: 40px;
}
/* 头部结束 */

/* 中间开始 */
.middle {
  width: 100%;
  margin-top: 40px;
}
.register-middle {
  width: 450px;
  height: 620px;
  margin: 0 auto;
  padding-top: 30px;
  /* border: 1px solid green; */
  box-shadow: -10px 0px 10px #fbfbfb, /*左边阴影*/ 0px -10px 10px #fbfbfb,
    /*上边阴影*/ 10px 0px 10px #fbfbfb, /*右边阴影*/ 0px 10px 10px #fbfbfb; /*下边阴影*/
}
.register-user {
  width: 360px;
  height: 476.83px;
  margin: 0px auto;
  justify-content: space-between;
}
.register-userLanding {
  width: 100%;
  height: 41px;
  font-size: 22px;
  margin: 20px 0;
}
.register-input {
  height: 60px;
  width: 100%;
  background: #f9f9f9;
  margin: 10px 0;
  border: none;
  // border-block-color: 1px solid pink;
  font-size: 20px;
}
.register-validation {
  width: 100px;
  height: 60px;
  border-width: 0;
  border-radius: 5px;
  background: #f9f9f9;
}
.register-checkbox {
  /* display: flex; */
  margin: 10px 0;
  font-size: 14px;
  vertical-align: middle;
  justify-content: space-between;
}
.register-password {
  height: 60px;
  width: 100%;
  background: #f9f9f9;
  margin: 10px 0;
  border: none;
  // border-block-color: 1px solid pink;
  font-size: 20px;
}
.checkbox {
  height: 12.67px;
  width: 12.67px;
}
.register-button {
  color: #fff;
  background-color: #ff5c00;
  font-size: 18px;
  width: 100%;
  height: 60px;
  border-width: 0px;
  border-radius: 5px;
  margin: 20px 0;
}
.register-helps {
  width: 100%;
  height: 35.33px;
}
.a-help a {
  color: #ff5c00;
  font-size: 17px;
  float: left;
}
.register-other {
  width: 100%;
  height: 96px;
  box-sizing: border-box;
}
.register-prompt {
  width: 100%;
  height: 40px;
  font-size: 17px;
  text-align: center;
  color: #838383;
}
.register-Imgs {
  width: 100%;
  height: 56px;
  position: relative;
  left: 35px;
}
.register-logo {
  width: 46px;
  height: 46px;
  margin: 12px;
  border-radius: 50%;
  text-align: center;
}
.register-nav :hover {
  color: #ff5c00;
}
.register-language {
  width: 86px;
  height: 40px;
  border-width: 0;
  color: #838383;
  appearance: none; /*去掉下拉箭头*/
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat
    scroll right center transparent;
}
.error-msg {
  color: red;
}
</style>
